<template>
    <el-container>

    <el-header>
        <strong>欢迎进入XXX管理系统</strong>
        <div class="header-avatar">
            <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>

            <el-dropdown>
                <span class="el-dropdown-link">
                {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><router-link :to="{name: 'UserCenter'}">个人中心</router-link></el-dropdown-item>
                    <el-dropdown-item @click.native="loginout()">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <i>{{dateFormat(time)}}</i>
        </div>
    </el-header>

     <el-container>
        <el-aside width="200px">
            <SideMenu></SideMenu>
        </el-aside>

        <el-main>
        <Tables></Tables>
            <div style=" margin: 0px 15px;">
                <router-view></router-view>
            </div>
        </el-main>
      </el-container>

    </el-container>
</template>

<script>
    import SideMenu from "../inc/SideMenu";
    import Tables from "../inc/Tables";
    export default {
        data() {
            return {
                time: new Date(),
                userInfo:{
                    id:'',
                    username:'未登录',
                    avatar: ''
                }
            }
        },
        created() {
            this.getUserInfo()
        },
        methods: {
            loginout(){
              this.$axios.post("/logout").then(res =>{
                  localStorage.clear()
                  sessionStorage.clear()
                  this.$store.commit("resetState")

                  this.$router.push("/login")
              })
            },
            getUserInfo(){
                this.$axios.get('/sys/userInfo').then(res =>{
                    this.userInfo = res.data.data
                })
            },
            dateFormat(time) {
                var date = new Date(time);
                var year = date.getFullYear();
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            }
        },
        mounted() {
            //显示当前日期时间
            let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(() => {
                _this.time = new Date(); // 修改数据date
            }, 1000)
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        },
        components: {
            SideMenu,
            Tables
        }
    }
</script>

<style scoped>
    .el-menu{
        height: 100vh;
    }
    .header-avatar{
        float: right;
        width: 300px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .el-container{
        padding: 0px;
        margin: 0px;
        height: 100vh;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-header{
        background-color: #303133;
        color: #33a3dc;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        color: #333;
           /* text-align: center;*/
        padding: 0px;
    }
    a{
        text-decoration: none;
    }
</style>
